<template>
  <view :class="theme" style="min-height: 800px; min-width: 1260px;">
    <view class="fd-row ai-start height-100percent p-20">
      <view class="br-20 bgc-primary oh" style="width: 240px; flex-shrink: 0;">
        <label @click="checkedItem(index)" v-for="(item, index) in items" :key="item.id"
          style="box-shadow: inset 0 -1px 1px #222a3f;"
          :class="[{ 'bgc-hover': itemIndex === index }, `color-inverse p-30`]">
          {{ item.projectName }}
        </label>
        <button hover-class="tap-hover" @click="switchPopup('addItem', 1)" style="border-color: #c8c7cc;" plain
          class="m-30 color-inverse fs-28">
          +添加项目
        </button>
      </view>
      <view class="f1 ml-20 oh height-100percent">
        <block v-if="items.length">
          <view class="fd-row br-20 fs-24 oh" style="flex-shrink: 0;">
            <view class="f1 bgc-primary pl-30 pr-30">
              <view class="f1 fd-row ai-center jc-sb">
                <text>项目名称：{{ itemInfo.projectName }}</text>
                <text>项目级别：{{ { 1: "高", 2: "中", 3: "低" }[itemInfo.level as 1 | 2 | 3] }}</text>
                <text>项目开始时间：{{ formatDate({ format: "Y-M-D h:m", timestamp: itemInfo.startTime }) }} </text>
              </view>
              <label class="f1 ai-center" style="border-top: 2px solid #222a3f;">备注：{{ itemInfo.remark }}</label>
            </view>
            <view class="bgc-hover ai-center jc-center" style="padding: 60rpx 120rpx 30rpx;">
              <button @click="endItem" hover-class="tap-hover" class="bgc-btn color-inverse fs-26 lh-66">结束项目</button>
              <button @click="removeItem" hover-class="tap-hover" plain
                class="mt-30 color-grey fs-26 lh-66 border-none">删除项目</button>
            </view>
          </view>

          <view class="mt-20 br-20 oh">
            <view class="fd-row fs-28 bgc-hover">
              <label v-for="(option, index) in options" :key="index" @click="optionIndex = index" style="padding: 0 15px;"
                :class="[`color-${optionIndex === index ? 'inverse' : 'grey'}`, `height-120 jc-center`]">
                {{ option }}
              </label>
            </view>

            <view v-if="optionIndex === 0" class="bgc-primary f1 oh">
              <button @click="switchPopup('addAccount', 1)" hover-class="tap-hover"
                class="bgc-btn color-inverse fs-26 lh-66" style="margin: 30rpx auto 30rpx 30rpx;">添加账号</button>
              <scroll-view v-if="accounts.length" scroll-y class="f1 oh">
                <view v-for="(account, index) in accounts" :key="index" class="ml-30 mr-30 p-30 br-20"
                  style="border-top: 2px solid #222a3f;">
                  <view class="fd-row ai-center height-100">
                    <label class="fs-28 mr-30" style="width: 300px;">
                      账号类型：{{ { 1: "主账号", 2: "量化账号" }[account.type as 1 | 2] }}
                    </label>
                    <button @click="removeAccount(index)" hover-class="tap-hover" plain
                      class="color-grey border-none fs-26 bgc-hover m-0">删除账号</button>
                  </view>
                  <view class="fd-row fs-24 color-grey height-100">
                    <label class="mr-30" style="width: 300px;">代币初始余额：{{ account.initQuoteAmount }}</label>
                    <label class="mr-30" style="width: 300px;">筹码初始余额：{{ account.quoteAmount }}</label>
                  </view>
                  <view class="fd-row fs-24 color-grey height-100">
                    <label class="mr-30" style="width: 300px;">代币可用余额：{{ account.tokenAmount }}</label>
                    <label class="mr-30" style="width: 300px;">筹码可用余额：{{ account.quoteAmount }}</label>
                  </view>
                  <view class="fd-row fs-24 color-grey height-100">
                    <label class="mr-30" style="width: 300px;">代币冻结余额：{{ account.frozenTokenAmount }}</label>
                    <label class="mr-30" style="width: 300px;">筹码冻结余额：{{ account.frozenQuoteAmount }}</label>
                  </view>
                  <view class="fd-row fs-24 color-grey height-100">
                    <label class="mr-30" style="width: 300px;">Access-key：{{ account.accessKey }}</label>
                    <label class="mr-30" style="width: 300px;">Secret-key：{{ account.secretKey }}</label>
                    <label class="mr-30" style="width: 300px;">
                      Passphrase-key：{{ account.passphraseKey || "暂无" }}
                    </label>
                  </view>
                </view>
              </scroll-view>
              <label v-else class="br-20 bgc-primary color-inverse p-60 jc-center">
                暂未添加账号...
              </label>
            </view>

            <view v-if="optionIndex === 1" class="bgc-primary p-60 oh">
              <view class="fd-row mb-30 ai-center">
                <label class="fs-28 jc-end" style="width: 150px;">最大涨幅(%)：</label>
                <uni-easyinput type="number" :style="{ width: `300px`, flex: `unset` }" />
              </view>
              <view class="fd-row mb-30 ai-center">
                <label class="fs-28 jc-end" style="width: 150px;">最大跌幅(%)：</label>
                <uni-easyinput type="number" :style="{ width: `300px`, flex: `unset` }" />
              </view>
              <view class="fd-row mb-30 ai-center">
                <label class="fs-28 jc-end" style="width: 150px;">最大下单量：</label>
                <uni-easyinput type="number" :style="{ width: `300px`, flex: `unset` }" />
              </view>

              <button hover-class="tap-hover" class="bgc-btn color-inverse fs-32"
                style="width: 300px; margin: 30px 150px 0;">修改</button>
            </view>

            <view v-if="optionIndex === 2" class="bgc-primary oh">
              <button @click="switchPopup('addPlan', 1)" hover-class="tap-hover" class="bgc-btn color-inverse fs-26 lh-66"
                style="margin: 30rpx auto 30rpx 30rpx;">添加规划</button>
              <uni-table class="f1" :loading="plans.loading" stripe emptyText="暂无更多数据">
                <uni-tr style="position: sticky; top: 0;" class="bgc-hover">
                  <uni-th align="center">开始时间</uni-th>
                  <uni-th align="center">结束时间</uni-th>
                  <uni-th align="center">内容</uni-th>
                  <uni-th align="center">级别</uni-th>
                </uni-tr>
                <uni-tr v-for="(plan, index) in plans.list" :key="index">
                  <uni-td align="center">2020-10-20</uni-td>
                  <uni-td align="center">2020-10-21</uni-td>
                  <uni-td align="center">北京市海淀区</uni-td>
                  <uni-td align="center">高级</uni-td>
                </uni-tr>
              </uni-table>

              <uni-pagination v-if="plans.total" class="mt-20 mb-20" show-icon :total="plans.total"
                :current="plans.current" />
            </view>

            <view v-if="optionIndex === 3" class="bgc-primary oh">
              <button hover-class="tap-hover" class="bgc-btn color-inverse fs-26 lh-66"
                style="margin: 30rpx auto 30rpx 30rpx;">添加用户</button>
              <uni-table class="f1" :loading="users.loading" stripe emptyText="暂无更多数据">
                <uni-tr style="position: sticky; top: 0;" class="bgc-hover">
                  <uni-th align="center">用户编号</uni-th>
                  <uni-th align="center">姓名</uni-th>
                  <uni-th align="center">等级</uni-th>
                  <uni-th align="center">操作</uni-th>
                </uni-tr>
                <uni-tr v-for="(plan, index) in users.list">
                  <uni-td align="center">20201020</uni-td>
                  <uni-td align="center">Jeson</uni-td>
                  <uni-td align="center">高级</uni-td>
                  <uni-td align="center">-</uni-td>
                </uni-tr>
              </uni-table>
              <uni-pagination v-if="users.total" class="mt-20 mb-20" show-icon :total="users.total"
                :current="users.current" />
            </view>
          </view>
        </block>
        <label v-else class="f1 br-20 bgc-primary color-inverse p-30 jc-center">
          暂无项目...
        </label>
      </view>
    </view>

    <uni-popup :ref="(e: any) => setRef(e, 'addPlan')" :is-mask-click="false">
      <view class="br-20 oh">
        <view class="bgc-hover fd-row jc-sb ai-center">
          <text class="fs-32 p-30">新增规划</text>
          <uni-icons @click="switchPopup('addPlan', 0)" type="closeempty" size="20" color="#fff" style="cursor: pointer;"
            class="p-30" />
        </view>
        <view class="bgc-primary" style="width: 600px; padding: 30px;">
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">项目等级：</text>
            <picker :range="['高', '中', '低']" class="f1" mode="selector">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input class="fs-28 f1 color-normal" placeholderStyle="font-size: 26rpx; color: #999;" disabled
                  type="text" placeholder="选择项目等级">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">开始时间：</text>
            <picker class="f1" mode="date">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input class="fs-28 f1 color-normal" placeholderStyle="font-size: 26rpx; color: #999;" disabled
                  type="text" placeholder="选择开始时间">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">结束时间：</text>
            <picker class="f1" mode="date">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input class="fs-28 f1 color-normal" placeholderStyle="font-size: 26rpx; color: #999;" disabled
                  type="text" placeholder="选择结束时间">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label class="ai-end" style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">内容：</text>
            <uni-easyinput type="textarea" />
          </label>
          <button hover-class="tap-hover" class="bgc-buy color-inverse fs-32"
            style="margin: 30rpx 100px 30rpx 180px;">新增</button>
        </view>
      </view>
    </uni-popup>

    <uni-popup :ref="(e: any) => setRef(e, 'addAccount')" :is-mask-click="false">
      <view class="br-20 oh">
        <view class="bgc-hover fd-row jc-sb ai-center">
          <text class="fs-32 p-30">新增账号</text>
          <uni-icons @click="switchPopup('addAccount', 0)" type="closeempty" size="20" color="#fff"
            style="cursor: pointer;" class="p-30" />
        </view>
        <view class="bgc-primary" style="width: 600px; padding: 30px;">
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 130px;">{{ addAccountForm.type.title }}：</text>
            <picker @change="changeAccountType" :range="addAccountData.type" range-key="value" class="f1" mode="selector">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input v-model="addAccountForm.type.showValue" class="fs-28 f1 color-normal"
                  placeholderStyle="font-size: 26rpx; color: #999;" disabled type="text" placeholder="选择账户类型">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 130px;">{{ addAccountForm.name.title }}：</text>
            <uni-easyinput v-model="addAccountForm.name.value" :placeholder="addAccountForm.name.placeholder" />
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 130px;">{{ addAccountForm.accessKey.title }}：</text>
            <uni-easyinput type="password" v-model="addAccountForm.accessKey.value"
              :placeholder="addAccountForm.accessKey.placeholder" />
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 130px;">{{ addAccountForm.secretKey.title }}：</text>
            <uni-easyinput type="password" v-model="addAccountForm.secretKey.value"
              :placeholder="addAccountForm.secretKey.placeholder" />
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 130px;">{{ addAccountForm.passphraseKey.title }}：</text>
            <uni-easyinput type="password" v-model="addAccountForm.passphraseKey.value"
              :placeholder="addAccountForm.passphraseKey.placeholder" />
          </label>
          <button @click="addAccount" hover-class="tap-hover" class="bgc-buy color-inverse fs-32"
            style="margin: 30rpx 100px 30rpx 200px;">新增</button>
        </view>
      </view>
    </uni-popup>

    <uni-popup :ref="(e: any) => setRef(e, 'addItem')" :is-mask-click="false">
      <view class="br-20 oh" style="width: 600px;">
        <view class="bgc-hover fd-row jc-sb ai-center">
          <text class="fs-32 p-30">新增项目</text>
          <uni-icons @click="switchPopup('addItem', 0)" type="closeempty" size="20" color="#fff" style="cursor: pointer;"
            class="p-30" />
        </view>
        <view class="bgc-primary" style="width: 100%; padding: 30px;">
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">{{ addItemForm.projectName.title }}：</text>
            <uni-easyinput v-model="addItemForm.projectName.value" placeholderStyle="font-size: 26rpx; color: #999;"
              :placeholder="addItemForm.projectName.placeholder" />
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">{{ addItemForm.bourseName.title }}：</text>
            <picker @change="changeBourse" :range="addItemData.bourse" range-key="bourseName" class="f1" mode="selector">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input class="fs-28 f1 color-normal" placeholderStyle="font-size: 26rpx; color: #999;" disabled
                  v-model="addItemForm.bourseName.value" :placeholder="addItemForm.bourseName.placeholder">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">{{ addItemForm.symbolName.title }}：</text>
            <picker @change="changeTransactionPair" :range="addItemData.transactionPair" range-key="symbolName" class="f1"
              mode="selector">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input v-model="addItemForm.symbolName.value" placeholderStyle="font-size: 26rpx; color: #999;"
                  class="fs-28 f1 color-normal" disabled :placeholder="addItemForm.symbolName.placeholder">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">{{ addItemForm.level.title }}：</text>
            <picker @change="changeLevel" :range="addItemData.level" range-key="value" class="f1" mode="selector">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input class="fs-28 f1 color-normal" placeholderStyle="font-size: 26rpx; color: #999;" disabled
                  v-model="addItemForm.level.showValue" :placeholder="addItemForm.level.placeholder">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">项目开始日期：</text>
            <picker @change="changeStartDate" class="f1" mode="date">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input class="fs-28 f1 color-normal" placeholderStyle="font-size: 26rpx; color: #999;" disabled
                  v-model="addItemForm.startTime.date" placeholder="选择项目开始日期">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">项目开始时间：</text>
            <picker @change="changeStartTime" class="f1" mode="time">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input class="fs-28 f1 color-normal" placeholderStyle="font-size: 26rpx; color: #999;" disabled
                  v-model="addItemForm.startTime.time" placeholder="选择项目开始时间">
                <uni-icons type="bottom" />
              </label>
            </picker>
          </label>
          <label class="ai-end" style="margin: 15px 100px;">
            <text class="text-right" style="width: 100px;">{{ addItemForm.remark.title }}：</text>
            <uni-easyinput type="textarea" placeholderStyle="font-size: 26rpx; color: #999;"
              v-model="addItemForm.remark.value" :placeholder="addItemForm.remark.placeholder" />
          </label>
          <button @click="addItem" hover-class="tap-hover" class="bgc-buy color-inverse fs-32"
            style="margin: 30rpx 100px 30rpx 180px;">新增</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { formatDate } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { useStore } from "vuex";


const store = useStore();
const { theme, itemIndex, items } = useMapState(["theme", "itemIndex", "items"]);

const refs = reactive<any>({});

const itemInfo = ref<any>({});
const accounts = ref<any[]>([]);

const options = ["交易账号", "操作限制", "项目划分", "用户分配"];
const optionIndex = ref(0);

const plans = reactive({
  total: 0,
  current: 0,
  loading: false,
  list: [] as any[]
});

const users = reactive({
  total: 0,
  current: 0,
  loading: false,
  list: [] as any[]
});

const addItemForm = reactive({
  projectName: {
    title: "项目名称",
    placeholder: "请输入项目名称",
    value: ""
  },
  bourseId: {
    value: "",
    placeholder: "选择交易所",
  },
  bourseName: {
    title: "交易所",
    placeholder: "选择交易所",
    value: ""
  },
  symbolId: {
    value: "",
    placeholder: "选择交易对",
  },
  symbolName: {
    title: "交易对",
    placeholder: "选择交易对",
    value: ""
  },
  level: {
    title: "项目等级",
    placeholder: "选择项目等级",
    value: 0,
    showValue: "",
  },
  startTime: {
    title: "项目开始时间",
    placeholder: "选择项目开始日期/时间",
    value: 0,
    date: "",
    time: ""
  },
  remark: {
    title: "备注",
    placeholder: "输入项目备注...",
    value: ""
  }
});

const addItemData = reactive({
  bourse: [] as any[],
  transactionPair: [] as any[],
  level: [
    { key: 1, value: "高" },
    { key: 2, value: "中" },
    { key: 3, value: "低" },
  ],
});

const addAccountData = {
  type: [
    {
      key: 1,
      value: "主账号"
    },
    {
      key: 2,
      value: "量化账号"
    }
  ]
};

const addAccountForm = reactive({
  type: {
    title: "账户类型",
    placeholder: "请输入账号名称",
    value: 0,
    showValue: ""
  },
  name: {
    title: "账号名称",
    placeholder: "请输入账号名称",
    value: "",
  },
  accessKey: {
    title: "access-key",
    placeholder: "请输入access-key",
    value: "",
  },
  secretKey: {
    title: "secret-key",
    placeholder: "请输入账号名称",
    value: "",
  },
  passphraseKey: {
    title: "passphrase-key",
    placeholder: "请输入账号名称",
    value: "",
  },
})

onLoad(() => {
  uni.request({
    url: "/project/bourses",
    success({ data }: any) {
      addItemData.bourse = data;
    }
  });
  store.dispatch("getItems").then(res => {
    if (!res.length) return;
    getItemInfo();
    getAccounts();
  });
});

const getItemInfo = () => {
  uni.request({
    url: "/project/detail",
    data: { projectId: items.value[itemIndex.value]?.id },
    success({ data }: any) {
      itemInfo.value = data;
    }
  });
}
const getAccounts = () => {
  uni.request({
    url: "/project/accounts",
    data: { projectId: items.value[itemIndex.value]?.id },
    success({ data }: any) {
      accounts.value = data;
    }
  });
}

const checkedItem = (index: number) => {
  if (index === itemIndex.value) return;
  store.commit("setState", { key: "itemIndex", value: index });
  getItemInfo();
  getAccounts();
}

const setRef = (el: any, key: string) => {
  if (el) refs[key] = el;
}

const switchPopup = (popupKey: string, toggle: 0 | 1) => {
  refs[popupKey]?.[["close", "open"][toggle]]?.();
}

const changeAccountType = ({ detail }: any) => {
  const { key, value } = addAccountData.type[detail.value];

  addAccountForm.type.value = key;
  addAccountForm.type.showValue = value;
}

const removeAccount = (index: number) => {
  uni.showModal({
    title: "温馨提示",
    content: "确定要删除此账号吗？",
    confirmColor: "#dd524d",
    success({ confirm }) {
      confirm &&
        uni.request({
          url: "/project/delAccounts",
          data: { accountId: accounts.value[index].id },
          success() {
            getAccounts();
          }
        })
    }
  });
}

const addAccount = () => {
  const form: any = {};
  const dataVerify = Object.keys(addAccountForm).every(key => {
    const { value, placeholder } = addAccountForm[key as keyof typeof addAccountForm];
    if (value) {
      form[key] = value;
      return true;
    }

    uni.showToast({ title: placeholder, icon: "none" });
    return false;
  });

  if (!dataVerify) return;

  uni.request({
    url: "/project/bindAccount",
    data: { projectId: items.value[itemIndex.value].id, ...form },
    method: "POST",
    success() {
      getAccounts();
      switchPopup("addAccount", 0);
    }
  });
}

const changeBourse = ({ detail }: any) => {
  const { id: bourseId, bourseName } = addItemData.bourse[detail.value];
  addItemForm.bourseId.value = bourseId;
  addItemForm.bourseName.value = bourseName;

  uni.showToast({ title: "loading...", icon: "loading", mask: true });
  uni.request({
    url: "/project/symbols",
    data: { bourseId },
    success({ data }: any) {
      uni.hideToast();
      addItemData.transactionPair = data;
    }
  })
}

const changeTransactionPair = ({ detail }: any) => {
  const { id, symbolName } = addItemData.transactionPair[detail.value];

  addItemForm.symbolId.value = id;
  addItemForm.symbolName.value = symbolName;
}

const changeLevel = ({ detail }: any) => {
  const { key, value } = addItemData.level[detail.value];

  addItemForm.level.value = key;
  addItemForm.level.showValue = value;
}

const changeStartDate = ({ detail }: any) => {
  addItemForm.startTime.date = detail.value;
}

const changeStartTime = ({ detail }: any) => {
  addItemForm.startTime.time = detail.value;
  const { date, time } = addItemForm.startTime;
  addItemForm.startTime.value = new Date(`${date} ${time}`).getTime();
}

const addItem = () => {
  const form: any = {};
  const dataVerify = Object.keys(addItemForm).every(key => {
    const { value, placeholder } = addItemForm[key as keyof typeof addItemForm];
    if (value) {
      form[key] = value;
      return true;
    }

    uni.showToast({ title: placeholder, icon: "none" });
    return false;
  });

  if (!dataVerify) return;

  uni.request({
    url: "/project/add",
    data: form,
    method: "POST",
    success() {
      store.dispatch("getItems");
      switchPopup("addItem", 0);
    }
  })
}

const endItem = () => {
  uni.showModal({
    title: "温馨提示",
    content: "确定要结束此项目吗？",
    confirmColor: "#dd524d",
    success({ confirm }) {
      confirm && uni.showToast({ title: "尚未开放", icon: "error" });
    }
  });
}

const removeItem = () => {
  uni.showModal({
    title: "温馨提示",
    content: "确定要删除此项目吗？",
    confirmColor: "#dd524d",
    success({ confirm }) {
      confirm && uni.showToast({ title: "尚未开放", icon: "error" });
    }
  });
}
</script>

<style lang="scss">
// scss
page {
  height: 100%;
  overflow: auto;
}

::v-deep {
  &.uni-table {
    background-color: $uni-bg-color-primary;
  }

  &.uni-table-mask {
    background-color: $uni-bg-color-mask;
  }

  &.uni-table-loading {
    height: 100px;
    line-height: 100px;
  }

  &.uni-table-td {
    color: $uni-text-color-grey;
    border-bottom: none;
  }

  &.uni-table-th {
    color: $uni-text-color-disable;
    border-color: $uni-bg-color-hover;
  }

  &.uni-table .uni-table-tr:nth-child(n+2):hover,
  &.table--stripe .uni-table-tr:nth-child(2n+3) {
    background-color: $uni-bg-color-hover;
  }
}
</style>